<template>
  <div>
    <el-container>
      <el-header
        style="
          background-color: #687581;
          height: 60px;
          color: #fff;
          font-size: 30px;
        "
        >统计图表信息
      </el-header>
    </el-container>

    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">
            <i class="el-icon-more"></i>
            <span slot="title" @click="toInfo">车辆信息</span>
          </el-menu-item>

          <el-menu-item index="2">
            <i class="el-icon-s-data"></i>
            <span slot="title"> 车辆统计 </span>
          </el-menu-item>

          <el-menu-item index="3">
            <i class="el-icon-location"></i>
            <span slot="title" @click="toCgpItemsInfo">充电桩信息</span>
          </el-menu-item>

          <!-- <el-menu-item index="4">
            <i class="el-icon-location"></i>
            <span slot="title">停车点信息</span>
          </el-menu-item>

          <el-menu-item index="5">
            <i class="el-icon-monitor"></i>
            <span slot="title">车辆数量管理</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>

      <el-container>
        <div style="margin-top: 10px"></div>
        <el-header style="text-align: right; font-size: 12px">
          <div style="width: 500px"></div>

          <div style="width: 200px; position: relative; float: right"></div>
        </el-header>

        <div style="margin-left: 20px">
          <div id="cata" :style="{ width: '1200px', height: '400px' }"></div>
          <div id="pie1" :style="{ width: '1300px', height: '450px' }"></div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data() {
    return {
      personEBikeCampusNum: [],
      using_repairingEBike: [],
      using_repairingBike: [],
      monthlyUsingRate: [],
    }
  },

  methods: {
    toInfo() {
      let { href } = this.$router.resolve({
        path: '/iteminfo',
      })
      window.open(href, '_blank')
    },

    toCgpItemsInfo() {
      let { href } = this.$router.resolve({
        path: '/cgpItems',
      })

      window.open(href, '_blank')
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    drawLine() {
      this.$axios({
        method: 'get',
        url: 'getSharedEBikeNum',
      }).then((res) => {
        // console.log(res.data);
        let num = [
          res.data.d1,
          res.data.d2,
          res.data.d3,
          res.data.d4,
          res.data.d5,
        ]
      })
    },
    //根据校区得到个人电动车数量
    getPersonalEBikeNumCampus(campus) {
      return this.$axios({
        method: 'get',
        url: `/getPersonalEBikeNumByCampus?campus=${campus}`,
      }).then((res) => {
        return res.data
      })
    },

    getEBikeNumByCampus() {
      let v1, v2, v3, v4, v5, v6, v7, v8, v9

      this.getPersonalEBikeNumCampus('泰山区')
        .then((v) => {
          v1 = v
        })
        .then(() => {
          this.getPersonalEBikeNumCampus('启林南')
            .then((v) => {
              v2 = v
            })
            .then(() => {
              this.getPersonalEBikeNumCampus('启林北')
                .then((v) => {
                  v3 = v
                })
                .then(() => {
                  this.getPersonalEBikeNumCampus('华山区')
                    .then((v) => {
                      v4 = v
                    })
                    .then(() => {
                      this.getPersonalEBikeNumCampus('六一区')
                        .then((v) => {
                          v5 = v
                        })
                        .then(() => {
                          this.getPersonalEBikeNumCampus('黑山区')
                            .then((v) => {
                              v6 = v
                            })
                            .then(() => {
                              this.getPersonalEBikeNumCampus('小五山')
                                .then((v) => {
                                  v7 = v
                                })
                                .then(() => {
                                  this.getPersonalEBikeNumCampus('嵩山区')
                                    .then((v) => {
                                      v8 = v
                                    })
                                    .then(() => {
                                      this.getPersonalEBikeNumCampus('单身宿舍')
                                        .then((v) => {
                                          v9 = v
                                        })
                                        .then(() => {
                                          this.personEBikeCampusNum = [
                                            { value: v1, name: '泰山区' },
                                            { value: v2, name: '启林南' },
                                            { value: v3, name: '启林北' },
                                            { value: v4, name: '华山区' },
                                            { value: v5, name: '六一区' },
                                            { value: v6, name: '黑山区' },
                                            { value: v7, name: '小五山' },
                                            { value: v8, name: '嵩山区' },
                                            { value: v9, name: '单身宿舍' },
                                          ]
                                        })
                                        .then(() => {
                                          this.getUsing_reparingBike().then(
                                            () => {
                                              setTimeout(() => {
                                                this.drawPie()
                                              }, 1000)
                                            }
                                          )
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        })
    },

    //得到使用中/维修中电动车数量
    getUsing_reparingEBike() {
      let v1, v2

      return this.$axios({
        method: 'get',
        url: '/getRepairSharedEBikeNum',
      })
        .then((res) => {
          v1 = res.data
        })
        .then(() => {
          this.$axios({
            method: 'get',
            url: '/getUseSharedEBikeNum',
          })
            .then((res) => {
              v2 = res.data
            })
            .then(() => {
              this.using_repairingEBike = [
                { value: v1, name: '维修中' },
                { value: v2, name: '正在使用中' },
              ]
            })
            .then(() => {
              // this.drawPie();
            })
        })
    },

    //得到使用中/维修中单车数量

    getUsing_reparingBike() {
      let v1, v2

      return this.$axios({
        method: 'get',
        url: '/getUseSharedBikeNum',
      })
        .then((res) => {
          v1 = res.data
        })
        .then(() => {
          this.$axios({
            method: 'get',
            url: '/getRepairSharedBikeNum',
          })
            .then((res) => {
              v2 = res.data
            })
            .then(() => {
              this.using_repairingBike = [
                { value: v1, name: '正在使用中' },
                { value: v2, name: '维修中' },
              ]
            })
            .then(() => {
              this.getUsing_reparingEBike()
            })
            .then(() => {
              // this.drawPie()
            })
        })
    },

    //得到每月使用率
    getMonthlyUsingRate() {
      let m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12

      this.$axios({
        method: 'get',
        url: '/getRate?month=1',
      })
        .then((res) => {
          m1 = res.data.split('%')[0]
        })
        .then(() => {
          this.$axios({
            method: 'get',
            url: '/getRate?month=2',
          })
            .then((res) => {
              m2 = res.data.split('%')[0]
            })
            .then(() => {
              this.$axios({
                method: 'get',
                url: '/getRate?month=3',
              })
                .then((res) => {
                  m3 = res.data.split('%')[0]
                })
                .then(() => {
                  this.$axios({
                    method: 'get',
                    url: '/getRate?month=4',
                  })
                    .then((res) => {
                      m4 = res.data.split('%')[0]
                    })
                    .then(() => {
                      this.$axios({
                        method: 'get',
                        url: '/getRate?month=5',
                      })
                        .then((res) => {
                          m5 = res.data.split('%')[0]
                        })
                        .then(() => {
                          this.$axios({
                            method: 'get',
                            url: '/getRate?month=6',
                          })
                            .then((res) => {
                              m6 = res.data.split('%')[0]
                            })
                            .then(() => {
                              this.$axios({
                                method: 'get',
                                url: '/getRate?month=7',
                              })
                                .then((res) => {
                                  m7 = res.data.split('%')[0]
                                })
                                .then(() => {
                                  this.$axios({
                                    method: 'get',
                                    url: '/getRate?month=8',
                                  })
                                    .then((res) => {
                                      m8 = res.data.split('%')[0]
                                    })
                                    .then(() => {
                                      this.$axios({
                                        method: 'get',
                                        url: '/getRate?month=9',
                                      })
                                        .then((res) => {
                                          m9 = res.data.split('%')[0]
                                        })
                                        .then(() => {
                                          this.$axios({
                                            method: 'get',
                                            url: '/getRate?month=10',
                                          })
                                            .then((res) => {
                                              m10 = res.data.split('%')[0]
                                            })
                                            .then(() => {
                                              this.$axios({
                                                method: 'get',
                                                url: '/getRate?month=11',
                                              })
                                                .then((res) => {
                                                  m11 = res.data.split('%')[0]
                                                })
                                                .then(() => {
                                                  this.$axios({
                                                    method: 'get',
                                                    url: '/getRate?month=12',
                                                  })
                                                    .then((res) => {
                                                      m12 =
                                                        res.data.split('%')[0]
                                                    })
                                                    .then(() => {
                                                      this.monthlyUsingRate = [
                                                        m1,
                                                        m2,
                                                        m3,
                                                        m4,
                                                        m5,
                                                        m6,
                                                        m7,
                                                        m8,
                                                        m9,
                                                        m10,
                                                        m11,
                                                        m12,
                                                      ]
                                                    })
                                                    .then(() => {
                                                      this.drawTable()
                                                    })
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        })
    },

    drawLine() {},

    drawTable() {
      var chartDom = document.getElementById('cata')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
        },
        title: [
          {
            text: '每月份共享电动车使用率 ',
            left: '40%',
          },
          {
            subtext:
              '使用率 = 每个月总使用次数 / （电动车数量 x 每个月的天数x每辆每天预期使用次数（2次））',
            left: '6%',
            top: '5%',
            // textAlign: "center",
          },
        ],
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        },
        yAxis: {
          type: 'value',
          // name: "",
          min: 0,
          max: 300,
          position: 'left',
          axisLabel: {
            formatter: '{value}% ',
          },
        },
        series: [
          {
            name: '使用率',
            data: this.monthlyUsingRate,
            type: 'line',
          },
        ],
      }
      option && myChart.setOption(option)
    },

    drawPie() {
      var chartDom = document.getElementById('pie1')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: [
          {
            text: '各校区个人电动车数量',
            left: '15%',

            textAlign: 'center',
          },
          {
            text: '正在使用中/维修中共享电动车数量',
            left: '50%',

            textAlign: 'center',
          },
          {
            text: '正在使用中/维修中共享单车数量',
            left: '85%',

            textAlign: 'center',
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4',
            'rose5',
            'rose6',
            'rose7',
            'rose8',
          ],
        },

        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '50%',
            center: ['15%', '50%'],

            itemStyle: {
              borderRadius: 5,
            },
            label: {
              // show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            data: this.personEBikeCampusNum,
          },
          {
            name: '数量',
            type: 'pie',
            radius: '50%',

            itemStyle: {
              borderRadius: 5,
            },

            data: this.using_repairingEBike,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
          {
            name: '数量',
            type: 'pie',
            radius: '50%',
            center: ['85%', '50%'],

            itemStyle: {
              borderRadius: 5,
            },

            data: this.using_repairingBike,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },

  mounted() {
    // this.drawTable();
    // this.drawPie();
    this.getEBikeNumByCampus()

    this.getEBikeNumByCampus()

    this.getMonthlyUsingRate()
  },
}
</script>

<style>
.el-header {
  background-color: #687581;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #687581;
  color: #333;
  text-align: center;
  line-height: 200px;
  margin-right: 12px;
}

.el-main {
  /* height: 650px; */
}
</style>
